<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1200px"
    :close-on-click-modal="false"
    @close="visible=false"
  >
    <el-container class="list-container">
      <el-main class="main">
        <collapse-tab class="query">
          <el-form
            :inline="true"
            :model="queryCondition"
            label-width="80px"
            @keyup.enter.native="query"
          >
            <!--查询条件区 -->
            <el-form-item label="是否授权">
              <dictionary-select
                v-model="queryCondition.hasPermission"
                :code="$constant.DICTIONARY_TYPE_CODES.YES_OR_NO"
              />
            </el-form-item>
            <el-form-item label="分类">
              <dictionary-select
                v-model="queryCondition.category"
                multiple
                :code="$constant.API_SERVICE_CATEGORY"
              />
            </el-form-item>

            <el-form-item label="名称">
              <p-input v-model="queryCondition.name" class="form-item" />
            </el-form-item>
            <el-form-item label="编码">
              <p-input v-model="queryCondition.code" class="form-item" />
            </el-form-item>
            <el-form-item label="状态">
              <dictionary-select
                v-model="queryCondition.status"
                multiple
                :code="$constant.DICTIONARY_TYPE_CODES.STATUS"
              />
            </el-form-item>

            <el-form-item style="float:right;">
              <el-button type="primary" @click="getTableData">查询</el-button>
            </el-form-item>
            <div class="clearfix" />
          </el-form>
        </collapse-tab>
        <el-card class="table">
          <div>
            <el-button
              v-permission="'cip:apiApp:grantApiPermission'"
              type="primary"
              @click="grantApiPermission"
            >授权</el-button>
            <el-button
              v-permission="'cip:apiApp:withdrawApiPermission'"
              type="primary"
              @click="withdrawApiPermission"
            >取消授权</el-button>
            <div style="clear:both;" />
          </div>
          <div style="margin-top:5px;">
            <div>
              <columns-controller v-model="columnList" :table-key="tableKey" />
            </div>
            <el-table
              v-loading="loading"
              :data="tableData"
              style="width: 100%"
              highlight-current-row
              border
              @sort-change="handleSortChange"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                v-for="(item, index) in showCols"
                :key="index"
                :label="item.label"
                :prop="item.prop"
                :show-overflow-tooltip="item.showOverflowTooltip"
                :width="item.width"
                :formatter="item.formatFunc"
                :sortable="item.sortable"
              />
            </el-table>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>

import CollapseTab from '@/components/CollapseTab'
import ColumnsController from '@/components/ColumnsController'
import DictionarySelect from '@/components/popsoft/DictionarySelect/DictionarySelect'

import PInput from '@/components/popsoft/Query/PInput'

export default {
  components: {

    CollapseTab,
    ColumnsController,
    DictionarySelect,
    PInput

  },
  data() {
    return {
      // 加载中
      loading: false,
      // 表格数据
      tableData: [],
      // 当前行
      currentId: this.constant.NO_ITEM_SELECTED,

      // 排序信息
      sortInfo: {
        sort_field: 'orderNo',
        sort_sortType: 'ascending'
      },
      // 复选框选中项
      multipleSelection: [],
      pageCode: 'cip:apiService',
      queryCondition: {

      },
      columnList: [
        // prop label show 必须定义， width/showOverflowTooltip/formatFunc/sortable 需要的话定义
        { prop: 'code', label: '编码', show: true },
        { prop: 'name', label: '名称', show: true },
        { prop: 'categoryName', label: '分类', show: true },
        { prop: 'statusName', label: '状态', show: true },
        { prop: 'hasPermissionName', label: '是否授权', show: true }
      ],
      visible: false,
      title: '接口权限',
      appId: ''
    }
  },
  computed: {
    showCols() {
      return this.columnList.filter(item => item.show)
    },
    tableKey() {
      const { path } = this.$route
      return `${path}/table`
    }
  },
  methods: {
    show(id) {
      this.appId = id
      this.visible = true
      this.getTableData()
    },
    // 获取表格数据
    getTableData() {
      return new Promise(resolve => {
        this.loading = true
        const params = Object.assign(this.queryCondition, this.sortInfo, { appId: this.appId })
        this.$api.cip.apiService.queryApiPermission(params)
          .then(res => {
            this.tableData = res.data
            resolve()
          }).finally(() => {
            this.loading = false
            this.currentId = this.$constant.NO_ITEM_SELECTED
          })
      })
    },
    // 处理查询
    query() {
      this.refresh()
    },
    // 刷新
    refresh() {
      this.getTableData()
    },
    // 授权
    grantApiPermission() {
      if (!this.checkSelected()) {
        return
      }
      this.$confirm('是否授权?', '确认', {
        type: 'warning'
      }).then(() => {
        const ids = this.getCheckedId()

        this.$api.cip.apiApp.grantApiPermission(this.appId, { apiServiceIdList: ids })
          .then(() => {
            this.refresh()
          })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 取消授权
    withdrawApiPermission() {
      if (!this.checkSelected()) {
        return
      }
      this.$confirm('是否授权?', '确认', {
        type: 'warning'
      }).then(() => {
        const ids = this.getCheckedId()
        this.$api.cip.apiApp.withdrawApiPermission(this.appId, { apiServiceIdList: ids })
          .then(() => {
            this.refresh()
          })
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 处理排序
    // eslint-disable-next-line no-unused-vars
    handleSortChange({ column, prop, order }) {
      this.sortInfo.sort_field = prop
      this.sortInfo.sort_sortType = order
      this.refresh()
    },
    // 复选多行
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 验证是否有选中行
    checkSelected() {
      if (this.multipleSelection.length === 0) {
        this.$message.info('请至少选中一行')
        return false
      }
      return true
    },
    // 获取表格选中行id
    getCheckedId() {
      let ids = ''
      this.multipleSelection.forEach(function (item) {
        ids += item.id + ','
      })
      return ids
    }

  }
}
</script>

<style lang="scss" scoped>
</style>
